import React, { Component } from 'react';
import { Collapse, Form, Col, Row, Input, Select, DatePicker, Modal, Icon, Button } from 'antd';
import { connect } from 'dva';
import moment from 'moment';
import styles from '@/pages/Operate.less';
import AntdDatePicker from '@/components/AntdDatePicker';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import AntdUpload from '@/components/AntdUpload';
import AntdInput from '@/components/AntdInput';
import AntdFormItem from '@/components/AntdFormItem';
import prompt from '@/components/Prompt';
import FileReader from '@/components/FileReader';
import { queryFileList, filterAddFile, filterDeteteFile } from '@/utils/common';
const dateFormat = 'YYYY-MM-DD HH:mm';
const Panel = Collapse.Panel;
const { TextArea } = Input;
const { Option } = Select;

@connect(({ tmsOilCard, common }) => ({
  tmsOilCard,
  dictObject: common.dictObject,
}))
@Form.create()
export default class RepairOperate extends Component {
  constructor(props) {
    super(props);
    this.state = {
      activeKey: ['1'],
    };
    this.paneSize = ['1'];
    this.fileList = [];
  }
  componentDidMount() {
    this.props.onRef(this);
    this.getOilCardList();
    // 查询字典：
    //币种：
    this.props.dispatch({
      type: 'common/querytDictByCode',
      payload: { code: 'currency-type' },
    });
  }
  getOilCardList = () => {
    this.props.dispatch({
      type: 'tmsOilCard/selectList',
      payload: { pageSize: 1000 },
    });
  };

  queryFileList = id => {
    queryFileList({
      props: this.props,
      params: { bizId: id, fileBizType: 'OILCARD_PAPERS' },
      callback: data => {
        if (!data) return;
        this.fileList = data;
        this.props.form.setFieldsValue({ fileTokens: data });
      },
    });
  };

  // 添加 或 编辑操作
  operatePaneButton = () => {
    const { dispatch, form, oilCardId, type } = this.props;
    this.props.form.validateFields((err, values) => {
      if (!err) {
        const { happenTime, oilCard, fileTokens, ...value } = values;
        if (happenTime) {
          value.happenTime = moment(happenTime).format(dateFormat);
        }
        value.fileTokens = filterAddFile(fileTokens);
        value.deleteFileIds = filterDeteteFile(fileTokens, this.fileList);
        value.oilCardId = oilCardId ? oilCardId : values.oilCard.split(',')[0];
        dispatch({
          type: 'tmsOilCard/rechange',
          payload: value,
          callback: () => {
            this.fileList = [];
            form.resetFields();
            this.getOilCardList();
            if (type == 'modal') {
              this.props.pfn('false');
            }
          },
        });
      }
    });
  };

  render() {
    const {
      list,
      type,
      form: { getFieldDecorator },
      location,
      tmsOilCard: { selectList },
      loading,
      match,
      dictObject,
      oilCardId,
      cardNo,
    } = this.props;

    const { id, activeKey } = this.state;

    const hasCardNo = type == 'modal' ? true : false;
    const _gutter = type == 'modal' ? { md: 4, lg: 12, xl: 24 } : { md: 8, lg: 24, xl: 48 };
    const _col = { md: 12, sm: 24 };
    const _row = { md: 24 };
    const prefixSelector = getFieldDecorator('currencyType', {
      initialValue: 'CNY',
    })(
      <Select style={{ width: 90 }}>
        {dictObject['currency-type'] &&
          dictObject['currency-type'].map(item => <Option key={item.code}>{item.value}</Option>)}
      </Select>
    );
    return (
      <div className={styles.tableListForm}>
        <Form layout="inline">
          <Row gutter={_gutter}>
            <Col {..._col}>
              <Form.Item label="油卡号">
                {getFieldDecorator('oilCard', {
                  rules: [{ required: true, message: '请选择' }],
                  initialValue: hasCardNo ? cardNo : undefined,
                })(
                  <Select
                    showSearch
                    filterOption={(input, option) =>
                      option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    }
                    placeholder="请选择"
                    style={{ width: '100%' }}
                    allowClear={true}
                    disabled={hasCardNo ? true : false}
                  >
                    {selectList.list &&
                      selectList.list.map((v, i) => {
                        return (
                          <Option key={i} value={v.id + ',' + v.cardNo}>
                            {v.cardNo}
                          </Option>
                        );
                      })}
                  </Select>
                )}
              </Form.Item>
            </Col>
            <Col {..._col}>
              <Form.Item label="充值时间">
                {getFieldDecorator('happenTime', {
                  rules: [{ required: true, message: '请选择' }],
                })(<AntdDatePicker showTime />)}
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={_gutter}>
            <Col {..._col}>
              <Form.Item label="充值地点">
                {getFieldDecorator('locationName', {
                  rules: [{ required: true, message: '请选择' }],
                })(<Input placeholder="请输入" />)}
              </Form.Item>
            </Col>
            <Col {..._col}>
              {/* <Form.Item label="充值金额">
                {getFieldDecorator('rechargeMoney', {
                  rules: [{ required: true, message: '请选择' }],
                })(
                  <Input
                    placeholder="请输入"
                    addonBefore={prefixSelector}
                    style={{ width: '100%' }}
                  />
                )}
              </Form.Item> */}

              <AntdFormItem
                label="充值金额"
                code="rechargeMoney"
                rules={[{ required: true, message: '请输入' }]}
                // initialValue={selectDetails ? selectDetails.currentMoney : undefined}
                getFieldDecorator={getFieldDecorator}
              >
                <AntdInput
                  mode="money"
                  label="充值金额"
                  placeholder="输入的长度不超过18位最多可保留两位小数的数字"
                  addonBefore={prefixSelector}
                />
              </AntdFormItem>
            </Col>
          </Row>
          <Row gutter={_gutter}>
            <Col {..._row}>
              <Form.Item label="备注">
                {getFieldDecorator('remarks', {})(<TextArea placeholder="请输入" rows={4} />)}
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={_gutter}>
            <Col {..._row}>
              <Form.Item label="票据">
                {getFieldDecorator('fileTokens')(<FileReader urlType="tms" />)}
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </div>
    );
  }
}
